<template>
  <div class="article-list-wrap">
    <!-- <div class="welcome">
      <img src="../../assets/image/welcome.png" />
      <p>欢迎回来！</p>
    </div>-->
    <!-- 版块3 -->
    <div class="block block-two">
      <div class="block-body">
        <h3>会员统计</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content" style="background: rgb(242, 246, 252);">
              <i class="el-icon-user"></i>
              <span>总会员数量</span>
              <p>1000</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <i class="el-icon-top"></i>
              <span>今日新增会员</span>
               <p>1000</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <i class="el-icon-finished"></i>
              <span>最近7天访问会员</span>
               <p>1000</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <i class="el-icon-date"></i>
              <span>最近30天访问会员</span>
               <p>1000</p>
            </div>
          </el-col>
        </el-row>

        <h3>订单统计</h3>
        <el-row :gutter="20">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <i class="el-icon-sell"></i>
              <span>总订单数量</span>
               <p>1000</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <i class="el-icon-male"></i>
              <span>总成交额</span>
               <p>1000</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <i class="el-icon-document-checked"></i>
              <span>待付款订单</span>
               <p>1000</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <i class="el-icon-thumb"></i>
              <span>待发货订单</span>
               <p>1000</p>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <div class="grid-content">
              <div id="chartBar" class="chart-bar"></div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <div id="chartBar2" class="chart-bar"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- <Ueditor :initData='tip' ref="ueditor"></Ueditor>
    <el-button type="primary" @click="getContent">获取内容</el-button>-->
  </div>
</template>

<script type="text/javascript">
import echarts from "echarts";
import Ueditor from "@/components/UE/ueditor.vue";

export default {
  components: {
    Ueditor
  },

  data() {
    return {
      tip: "",
      content: ""
    };
  },

  //调用
  mounted() {
    this.$nextTick(function() {
      this.drawBar1("chartBar");
      this.drawBar2("chartBar2");
    });
  },

  methods: {
    // getContent() {
    //   this.content = this.$refs.ueditor.getUEContent();
    //   console.log(this.content)
    // },

    // 折线图
    drawBar1(id) {
      this.chartLine = echarts.init(document.getElementById(id));
      this.chartLine.setOption({
        xAxis: {
          type: "category",
          data: ["0", "100", "200", "400", "600", "800", "1000", "10000"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [22, 14, 9, 13, 6, 7, 2, 4],
            type: "line"
          }
        ]
      });
    },
    // 柱状图
    drawBar2(id) {
      this.chartLine = echarts.init(document.getElementById(id));
      this.chartLine.setOption({
        xAxis: {
          type: "category",
          data: [
            "0-50元",
            "51-100元",
            "101-200元",
            "201-500元",
            "501-1000元",
            "1001-5000元",
            "5001-10000元",
            "10001元以上"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [22, 14, 9, 13, 6, 7, 2, 4],
            type: "bar"
          }
        ]
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background:rgb(242, 246, 252);
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.grid-content{
  padding:20px;
}
.grid-content span{
  color:#666;
}
.grid-content p{
  margin-top :10px;
  text-align center;
  font-size:30px;
  margin-bottom :20px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.article-list-wrap {
  margin-bottom: 20px;
  height: calc(100% - 42px);

  .welcome {
    padding-top: 20%;
    text-align: center;

    img {
      width: 240px;
    }

    p {
      margin-top: 20px;
      font-size: 20px;
    }
  }
}

.block-body {
  padding: 40px 30px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.block-body h3{
  font-size:16px;
  line-height 35px;
}

.chart-bar {
  width: 100%;
  height: 350px;
}
</style>
